import React from 'react'
import {Form,Input,Button} from "antd-mobile"
import request from "../../api/request";
import { useNavigate } from 'react-router-dom';
import { useDeb } from '../../hooks/useDeb';

function Login() {
    const navigate=useNavigate();
    const onFinish=useDeb(async(value)=>{
        const res=await request.post('/login',value)
        console.log(res.data.data)
        console.log(value)
        const {code,data,message}=res.data
        if(code==200){
            localStorage.setItem("token",data.token)
            alert(message)
            navigate('/')
        }
        else{
            alert(message)
        }
    })
    console.log("防抖",useDeb)
    // const hanldeCode=()=>{
    //     form.validateFields(["tel"]).then(async(tel)=>{
    //         const res=await request.get('/login/code',{
    //             params:{
    //                 tel
    //             }
    //         })
    //         console.log(res.data)
    //     })
    // }
  return (
    <div>
      <Form onFinish={onFinish} layout='horizontal' footer={
          <div>
            <Button block type='submit' color='primary' size='large'>
                登录
            </Button>
            <Button onClick={()=>navigate('/zhuc')} style={{marginTop:"10px"}} block color='primary' size='large'>
                注册
            </Button>
          </div>
        }>
        <Form.Item label='账号' name='username' rules={[{ required: true, message: '账号不能为空' },{min:11,max:11,message:"请输入正确账号"}]}>
            <Input placeholder='请输入账号'></Input>
        </Form.Item>
        <Form.Item label='密码' name='password' extra={<Button >获取验证码</Button>} rules={[{ required: true, message: '密码不能为空' }]}>
            <Input placeholder='请输入密码'></Input>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
